<template>
  <div class="algorithm-puzzle">
    <div class="game-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="game-title">
        <h1>🧩 算法解谜</h1>
        <p>通过解谜游戏学习常用算法和数据结构，培养算法思维</p>
      </div>
      <div class="game-stats">
        <el-statistic title="解开谜题" :value="gameStats.solvedPuzzles" />
        <el-statistic title="完美通关" :value="gameStats.perfectSolves" />
        <el-statistic title="获得积分" :value="gameStats.points" />
      </div>
    </div>

    <!-- 关卡选择 -->
    <div v-if="!gameStarted" class="level-selection">
      <h2>选择算法主题</h2>
      <div class="themes-grid">
        <div 
          v-for="theme in themes" 
          :key="theme.id"
          class="theme-card"
          :class="{ locked: theme.locked }"
          @click="!theme.locked && selectTheme(theme)"
        >
          <div class="theme-icon" :style="{ background: theme.color }">
            {{ theme.icon }}
          </div>
          <h3>{{ theme.name }}</h3>
          <p>{{ theme.description }}</p>
          <div class="theme-info">
            <el-tag :type="theme.difficultyType" size="small">{{ theme.difficulty }}</el-tag>
            <span>{{ theme.puzzleCount }} 个谜题</span>
            <span>💰 {{ theme.points }}积分</span>
          </div>
          <div class="theme-progress" v-if="theme.completed > 0">
            <el-progress :percentage="Math.round((theme.completed / theme.puzzleCount) * 100)" />
          </div>
          <el-icon v-if="theme.locked" class="lock-icon"><Lock /></el-icon>
        </div>
      </div>
    </div>

    <!-- 谜题游戏界面 -->
    <div v-else class="puzzle-game">
      <div class="game-sidebar">
        <div class="puzzle-info">
          <h3>{{ currentTheme?.name }}</h3>
          <p>谜题 {{ currentPuzzleIndex + 1 }} / {{ currentPuzzles.length }}</p>
          <el-progress :percentage="progressPercentage" />
        </div>

        <div class="stats-panel">
          <h4>📊 当前统计</h4>
          <div class="stat-item">
            <span>已完成:</span>
            <strong>{{ solvedCount }}</strong>
          </div>
          <div class="stat-item">
            <span>正确率:</span>
            <strong>{{ accuracy }}%</strong>
          </div>
          <div class="stat-item">
            <span>使用提示:</span>
            <strong>{{ hintsUsed }}</strong>
          </div>
          <div class="stat-item">
            <span>当前得分:</span>
            <strong>{{ currentScore }}</strong>
          </div>
        </div>

        <div class="hint-panel">
          <h4>💡 提示</h4>
          <el-button 
            type="warning" 
            size="small"
            :disabled="availableHints <= 0"
            @click="useHint"
          >
            使用提示 (剩余 {{ availableHints }})
          </el-button>
          <div v-if="currentHint" class="hint-text">
            {{ currentHint }}
          </div>
        </div>
      </div>

      <div class="game-main">
        <div class="puzzle-card">
          <div class="puzzle-header">
            <h2>{{ currentPuzzle?.title }}</h2>
            <el-tag :type="getDifficultyType(currentPuzzle?.difficulty)" size="large">
              {{ currentPuzzle?.difficulty }}
            </el-tag>
          </div>

          <div class="puzzle-content">
            <!-- 谜题描述 -->
            <div class="puzzle-description">
              <h3>📝 问题描述</h3>
              <p>{{ currentPuzzle?.description }}</p>
            </div>

            <!-- 可视化区域 -->
            <div class="puzzle-visual">
              <h3>🎨 可视化演示</h3>
              <div class="visual-area">
                <component 
                  :is="getVisualComponent(currentPuzzle?.type)" 
                  :data="visualData"
                  :answer="userAnswer"
                  @update="handleVisualUpdate"
                />
              </div>
            </div>

            <!-- 交互区域 -->
            <div class="puzzle-interaction">
              <h3>🎯 你的答案</h3>
              <component 
                :is="getInteractionComponent(currentPuzzle?.type)"
                v-model="userAnswer"
                :puzzle="currentPuzzle"
                @change="handleAnswerChange"
              />
            </div>
          </div>

          <div class="puzzle-actions">
            <el-button @click="skipPuzzle">跳过</el-button>
            <el-button type="primary" size="large" @click="checkAnswer">
              检查答案
            </el-button>
          </div>
        </div>

        <!-- 结果反馈 -->
        <el-dialog
          v-model="showResultDialog"
          :title="resultTitle"
          width="500px"
          :close-on-click-modal="false"
        >
          <div class="result-content">
            <div class="result-icon" :class="resultType">
              <el-icon v-if="resultType === 'success'"><CircleCheck /></el-icon>
              <el-icon v-else><CircleClose /></el-icon>
            </div>
            <p>{{ resultMessage }}</p>
            <div v-if="resultType === 'success'" class="result-score">
              获得 <strong>{{ earnedPoints }}</strong> 积分
            </div>
            <div v-else class="correct-answer">
              <h4>正确答案：</h4>
              <p>{{ currentPuzzle?.explanation }}</p>
            </div>
          </div>
          <template #footer>
            <el-button type="primary" @click="nextPuzzle">
              {{ currentPuzzleIndex < currentPuzzles.length - 1 ? '下一题' : '完成' }}
            </el-button>
          </template>
        </el-dialog>
      </div>
    </div>

    <!-- 完成对话框 -->
    <el-dialog
      v-model="showCompleteDialog"
      title="主题完成"
      width="600px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="complete-content">
        <div class="complete-score">
          <h2>最终得分</h2>
          <div class="score-display">{{ finalScore }}</div>
          <el-rate v-model="performanceRating" disabled show-score />
        </div>

        <div class="complete-stats">
          <div class="stat">
            <span>完成谜题:</span>
            <strong>{{ solvedCount }} / {{ currentPuzzles.length }}</strong>
          </div>
          <div class="stat">
            <span>正确率:</span>
            <strong>{{ accuracy }}%</strong>
          </div>
          <div class="stat">
            <span>使用提示:</span>
            <strong>{{ hintsUsed }}</strong>
          </div>
          <div class="stat">
            <span>完美通关:</span>
            <strong>{{ isPerfect ? '是' : '否' }}</strong>
          </div>
        </div>

        <el-alert
          :title="`获得 ${finalScore} 积分！`"
          :type="finalScore >= 300 ? 'success' : 'warning'"
          :closable="false"
          show-icon
        />
      </div>
      <template #footer>
        <el-button @click="restartTheme">重新挑战</el-button>
        <el-button type="primary" @click="backToSelection">返回选择</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, h } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Lock, CircleCheck, CircleClose
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏统计
const gameStats = ref({
  solvedPuzzles: 48,
  perfectSolves: 12,
  points: 3650
})

// 主题列表
const themes = ref([
  {
    id: 1,
    name: '排序算法',
    icon: '🔢',
    description: '学习各种排序算法的原理和实现',
    difficulty: '简单',
    difficultyType: 'success',
    puzzleCount: 5,
    points: 150,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    completed: 3,
    locked: false
  },
  {
    id: 2,
    name: '搜索算法',
    icon: '🔍',
    description: '掌握二分查找、深度优先等搜索技巧',
    difficulty: '中等',
    difficultyType: 'warning',
    puzzleCount: 6,
    points: 200,
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    completed: 0,
    locked: false
  },
  {
    id: 3,
    name: '动态规划',
    icon: '🧮',
    description: '通过经典问题理解动态规划思想',
    difficulty: '困难',
    difficultyType: 'danger',
    puzzleCount: 8,
    points: 300,
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    completed: 0,
    locked: false
  },
  {
    id: 4,
    name: '图算法',
    icon: '🕸️',
    description: '学习图的遍历和最短路径算法',
    difficulty: '困难',
    difficultyType: 'danger',
    puzzleCount: 7,
    points: 280,
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    completed: 0,
    locked: false
  },
  {
    id: 5,
    name: '树结构',
    icon: '🌲',
    description: '掌握二叉树、平衡树等树形结构',
    difficulty: '中等',
    difficultyType: 'warning',
    puzzleCount: 6,
    points: 220,
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    completed: 0,
    locked: false
  },
  {
    id: 6,
    name: '贪心算法',
    icon: '💰',
    description: '学习贪心策略解决优化问题',
    difficulty: '中等',
    difficultyType: 'warning',
    puzzleCount: 5,
    points: 180,
    color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    completed: 0,
    locked: false
  }
])

// 谜题库
const puzzleBank = {
  1: [ // 排序算法
    {
      id: 1,
      title: '冒泡排序可视化',
      difficulty: '简单',
      type: 'sort',
      description: '给定数组 [64, 34, 25, 12, 22, 11, 90]，使用冒泡排序算法对其进行排序。请选择正确的排序步骤。',
      visualData: [64, 34, 25, 12, 22, 11, 90],
      correctAnswer: [[34, 64, 25, 12, 22, 11, 90], [34, 25, 64, 12, 22, 11, 90]],
      explanation: '冒泡排序通过重复遍历数组，比较相邻元素并交换位置，最大元素会"冒泡"到最后。',
      points: 30,
      hints: ['观察相邻元素的比较', '较大的元素会逐步向右移动']
    },
    {
      id: 2,
      title: '选择排序原理',
      difficulty: '简单',
      type: 'sort',
      description: '在选择排序中，每次从未排序部分选出最小元素。完成第一轮选择。',
      visualData: [29, 10, 14, 37, 13],
      correctAnswer: [10, 29, 14, 37, 13],
      explanation: '选择排序每次选择未排序部分的最小值，与未排序部分的第一个元素交换。',
      points: 30,
      hints: ['找出数组中的最小值', '将最小值与第一个位置交换']
    },
    {
      id: 3,
      title: '快速排序分区',
      difficulty: '中等',
      type: 'sort',
      description: '使用快速排序对 [10, 7, 8, 9, 1, 5] 进行分区，选择最后一个元素作为基准。',
      visualData: [10, 7, 8, 9, 1, 5],
      correctAnswer: [1, 5, 8, 9, 10, 7],
      explanation: '快速排序选择一个基准值，将小于基准的元素放左边，大于基准的放右边。',
      points: 40,
      hints: ['选择5作为基准', '小于5的元素移到左边']
    }
  ],
  2: [ // 搜索算法
    {
      id: 1,
      title: '二分查找',
      difficulty: '简单',
      type: 'search',
      description: '在有序数组 [2, 5, 8, 12, 16, 23, 38, 45, 56, 67, 78] 中使用二分查找搜索 23。',
      visualData: [2, 5, 8, 12, 16, 23, 38, 45, 56, 67, 78],
      target: 23,
      correctAnswer: 5,
      explanation: '二分查找在有序数组中每次将搜索范围减半，时间复杂度为O(log n)。',
      points: 35,
      hints: ['找到中间元素', '比较目标值与中间值的大小']
    }
  ],
  3: [ // 动态规划
    {
      id: 1,
      title: '斐波那契数列',
      difficulty: '简单',
      type: 'dp',
      description: '计算斐波那契数列第10项。F(0)=0, F(1)=1, F(n)=F(n-1)+F(n-2)',
      correctAnswer: 55,
      explanation: '使用动态规划自底向上计算，避免重复计算。',
      points: 40,
      hints: ['从F(0)和F(1)开始', '每项等于前两项之和']
    },
    {
      id: 2,
      title: '最长公共子序列',
      difficulty: '困难',
      type: 'dp',
      description: '找出字符串"ABCDGH"和"AEDFHR"的最长公共子序列长度。',
      correctAnswer: 3,
      explanation: '使用二维DP表，dp[i][j]表示前i和前j个字符的最长公共子序列。',
      points: 60,
      hints: ['使用二维表格记录', '相同字符时dp[i][j]=dp[i-1][j-1]+1']
    }
  ]
}

// 游戏状态
const gameStarted = ref(false)
const currentTheme = ref(null)
const currentPuzzles = ref([])
const currentPuzzleIndex = ref(0)
const solvedCount = ref(0)
const correctCount = ref(0)
const hintsUsed = ref(0)
const availableHints = ref(3)
const currentScore = ref(0)
const currentHint = ref('')
const userAnswer = ref(null)
const visualData = ref([])
const showResultDialog = ref(false)
const showCompleteDialog = ref(false)
const resultType = ref('success')
const resultTitle = ref('')
const resultMessage = ref('')
const earnedPoints = ref(0)
const finalScore = ref(0)
const performanceRating = ref(3)

// 当前谜题
const currentPuzzle = computed(() => {
  return currentPuzzles.value[currentPuzzleIndex.value] || {}
})

// 进度百分比
const progressPercentage = computed(() => {
  if (currentPuzzles.value.length === 0) return 0
  return Math.round(((currentPuzzleIndex.value + 1) / currentPuzzles.value.length) * 100)
})

// 正确率
const accuracy = computed(() => {
  if (solvedCount.value === 0) return 0
  return Math.round((correctCount.value / solvedCount.value) * 100)
})

// 是否完美通关
const isPerfect = computed(() => {
  return correctCount.value === currentPuzzles.value.length && hintsUsed.value === 0
})

// 获取难度类型
function getDifficultyType(difficulty) {
  const map = { '简单': 'success', '中等': 'warning', '困难': 'danger' }
  return map[difficulty] || 'info'
}

// 选择主题
function selectTheme(theme) {
  currentTheme.value = theme
  currentPuzzles.value = puzzleBank[theme.id] || []
  
  if (currentPuzzles.value.length === 0) {
    ElMessage.warning('该主题的谜题正在开发中...')
    return
  }
  
  // 重置状态
  currentPuzzleIndex.value = 0
  solvedCount.value = 0
  correctCount.value = 0
  hintsUsed.value = 0
  availableHints.value = 3
  currentScore.value = 0
  currentHint.value = ''
  userAnswer.value = null
  
  gameStarted.value = true
  loadPuzzle()
  
  ElMessage.success(`开始 ${theme.name} 挑战！`)
}

// 加载谜题
function loadPuzzle() {
  const puzzle = currentPuzzle.value
  if (puzzle.visualData) {
    visualData.value = [...puzzle.visualData]
  }
  userAnswer.value = null
  currentHint.value = ''
}

// 获取可视化组件
function getVisualComponent(type) {
  // 简单的内联可视化组件
  if (type === 'sort') {
    return {
      props: ['data', 'answer'],
      render() {
        return h('div', { class: 'sort-visual' }, [
          h('div', { class: 'array-display' }, 
            this.data.map((num, i) => 
              h('div', { 
                class: 'array-item',
                style: { height: `${num}px` }
              }, num)
            )
          )
        ])
      }
    }
  }
  
  return {
    render() {
      return h('div', { class: 'visual-placeholder' }, '可视化区域')
    }
  }
}

// 获取交互组件
function getInteractionComponent(type) {
  if (type === 'sort') {
    return {
      props: ['modelValue', 'puzzle'],
      emits: ['update:modelValue', 'change'],
      render() {
        return h('div', { class: 'sort-interaction' }, [
          h('el-input', {
            modelValue: this.modelValue,
            placeholder: '输入排序后的数组，用逗号分隔',
            onInput: (val) => {
              this.$emit('update:modelValue', val)
              this.$emit('change', val)
            }
          })
        ])
      }
    }
  }
  
  if (type === 'dp' || type === 'search') {
    return {
      props: ['modelValue', 'puzzle'],
      emits: ['update:modelValue', 'change'],
      render() {
        return h('div', { class: 'number-interaction' }, [
          h('el-input-number', {
            modelValue: this.modelValue,
            placeholder: '输入答案',
            min: 0,
            onChange: (val) => {
              this.$emit('update:modelValue', val)
              this.$emit('change', val)
            }
          })
        ])
      }
    }
  }
  
  return {
    render() {
      return h('div', '答案输入区域')
    }
  }
}

// 处理答案变化
function handleAnswerChange(value) {
  // 可以添加实时验证逻辑
}

// 处理可视化更新
function handleVisualUpdate(data) {
  visualData.value = data
}

// 使用提示
function useHint() {
  if (availableHints.value > 0) {
    const hints = currentPuzzle.value.hints || []
    const hintIndex = 3 - availableHints.value
    currentHint.value = hints[hintIndex] || '没有更多提示了'
    availableHints.value--
    hintsUsed.value++
  }
}

// 检查答案
function checkAnswer() {
  if (userAnswer.value === null || userAnswer.value === '') {
    ElMessage.warning('请先输入答案')
    return
  }
  
  solvedCount.value++
  
  const puzzle = currentPuzzle.value
  const isCorrect = checkIfCorrect(userAnswer.value, puzzle.correctAnswer, puzzle.type)
  
  if (isCorrect) {
    correctCount.value++
    const points = calculatePoints(puzzle.points)
    earnedPoints.value = points
    currentScore.value += points
    
    resultType.value = 'success'
    resultTitle.value = '🎉 回答正确！'
    resultMessage.value = puzzle.explanation
  } else {
    resultType.value = 'error'
    resultTitle.value = '❌ 回答错误'
    resultMessage.value = '请查看正确答案和解析'
  }
  
  showResultDialog.value = true
}

// 检查答案是否正确
function checkIfCorrect(answer, correct, type) {
  if (type === 'sort') {
    // 简单比较字符串
    const userArr = answer.split(',').map(s => s.trim())
    const correctStr = Array.isArray(correct[0]) ? correct[0].join(',') : correct.join(',')
    return userArr.join(',') === correctStr
  }
  
  return answer == correct
}

// 计算积分
function calculatePoints(basePoints) {
  let points = basePoints
  
  // 提示使用惩罚
  if (hintsUsed.value > 0) {
    points = Math.round(points * 0.8)
  }
  
  return points
}

// 跳过谜题
function skipPuzzle() {
  solvedCount.value++
  nextPuzzle()
}

// 下一题
function nextPuzzle() {
  showResultDialog.value = false
  
  if (currentPuzzleIndex.value < currentPuzzles.value.length - 1) {
    currentPuzzleIndex.value++
    loadPuzzle()
  } else {
    completeTheme()
  }
}

// 完成主题
function completeTheme() {
  finalScore.value = currentScore.value
  
  // 计算星级
  if (isPerfect.value) {
    performanceRating.value = 5
  } else if (accuracy.value >= 80) {
    performanceRating.value = 4
  } else if (accuracy.value >= 60) {
    performanceRating.value = 3
  } else {
    performanceRating.value = 2
  }
  
  // 更新主题进度
  currentTheme.value.completed = solvedCount.value
  
  // 更新总体统计
  gameStats.value.solvedPuzzles += correctCount.value
  gameStats.value.points += finalScore.value
  if (isPerfect.value) {
    gameStats.value.perfectSolves++
  }
  
  showCompleteDialog.value = true
}

// 重新挑战
function restartTheme() {
  showCompleteDialog.value = false
  selectTheme(currentTheme.value)
}

// 返回选择
function backToSelection() {
  showCompleteDialog.value = false
  gameStarted.value = false
}

// 返回
function goBack() {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.algorithm-puzzle {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.game-title {
  flex: 1;
}

.game-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
}

.game-title p {
  margin: 0;
  opacity: 0.9;
}

.game-stats {
  display: flex;
  gap: 40px;
}

.game-stats :deep(.el-statistic__head) {
  color: rgba(255, 255, 255, 0.8);
}

.game-stats :deep(.el-statistic__content) {
  color: white;
  font-weight: bold;
}

/* 主题选择 */
.level-selection {
  padding: 40px;
}

.level-selection h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
  color: #303133;
}

.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.theme-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.theme-card:hover:not(.locked) {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.theme-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.theme-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 48px;
}

.theme-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
  text-align: center;
}

.theme-card p {
  margin: 0 0 20px 0;
  color: #606266;
  text-align: center;
  line-height: 1.6;
}

.theme-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #909399;
  font-size: 14px;
}

.theme-progress {
  margin-top: 16px;
}

.lock-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: #909399;
}

/* 谜题游戏 */
.puzzle-game {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
}

.game-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.puzzle-info,
.stats-panel,
.hint-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.puzzle-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #303133;
}

.puzzle-info p {
  margin: 0 0 12px 0;
  color: #606266;
}

.stats-panel h4,
.hint-panel h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.stat-item span {
  color: #606266;
}

.stat-item strong {
  color: #303133;
}

.hint-panel .el-button {
  width: 100%;
  margin-bottom: 12px;
}

.hint-text {
  padding: 12px;
  background: #f0f9ff;
  border-radius: 6px;
  color: #606266;
  line-height: 1.6;
  font-size: 14px;
}

/* 谜题卡片 */
.puzzle-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.puzzle-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 2px solid #f0f2f5;
}

.puzzle-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.puzzle-content {
  margin-bottom: 24px;
}

.puzzle-description,
.puzzle-visual,
.puzzle-interaction {
  margin-bottom: 24px;
}

.puzzle-description h3,
.puzzle-visual h3,
.puzzle-interaction h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #303133;
}

.puzzle-description p {
  margin: 0;
  color: #606266;
  line-height: 1.8;
  font-size: 15px;
}

.visual-area {
  min-height: 200px;
  background: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sort-visual {
  width: 100%;
}

.array-display {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
}

.array-item {
  width: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  padding-bottom: 8px;
  transition: all 0.3s ease;
}

.puzzle-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* 结果对话框 */
.result-content {
  text-align: center;
  padding: 20px;
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.result-icon.success {
  background: #f0f9ff;
  color: #67c23a;
}

.result-icon.error {
  background: #fef0f0;
  color: #f56c6c;
}

.result-content p {
  margin: 0 0 20px 0;
  color: #606266;
  line-height: 1.8;
}

.result-score {
  font-size: 18px;
  color: #303133;
}

.result-score strong {
  color: #409eff;
  font-size: 24px;
}

.correct-answer {
  text-align: left;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.correct-answer h4 {
  margin: 0 0 8px 0;
  color: #303133;
}

.correct-answer p {
  margin: 0;
  color: #606266;
}

/* 完成对话框 */
.complete-content {
  padding: 20px;
}

.complete-score {
  text-align: center;
  margin-bottom: 30px;
}

.complete-score h2 {
  margin: 0 0 16px 0;
  color: #303133;
}

.score-display {
  font-size: 60px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 16px;
}

.complete-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.complete-stats .stat {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
}

.complete-stats .stat span {
  display: block;
  margin-bottom: 8px;
  color: #909399;
  font-size: 14px;
}

.complete-stats .stat strong {
  font-size: 24px;
  color: #303133;
}

@media (max-width: 1200px) {
  .puzzle-game {
    grid-template-columns: 1fr;
  }
  
  .themes-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
</style>

